<template>
	<view class="">
		<view class="u-flex u-flex-y-center b1">
			<input class="input_code" type="number" v-model="code" placeholder="请输入验证码" >
			<text>|</text>
			<view class="dynacode" :class="dynacodeData.seconds == 60 ? 'ns-text-color' : 'ns-text-color-gray'" @click="sendMobileCode">
				{{ dynacodeData.codeText }}
			</view>
		</view>
		<view class="p">验证码将发送到手机号{{mobile | mobile}}</view>
		<view class="button" @click="unbind">
			确定
		</view>	
	</view>
</template>

<script>

	export default{
		components:{
		
		},
		filters: {
			mobile(mobile) {
				return mobile.substring(0, 4 - 1) + '****' + mobile.substring(6 + 1);
			}
		},
		data() {
		 
			return {
				code:"",
				mobile:"159178720876",
				dynacodeData: {
					seconds: 60,
					timer: null,
					codeText: '获取验证码',
					isSend: false
				},
				key: '',
			}
		},
		  computed: {
		      
		    },
		onLoad() {
		
		},
		
		methods: {
			sendMobileCode() {
				if (this.dynacodeData.seconds != 60) return;
				// if (this.dynacodeData.isSend) return;
				// this.dynacodeData.isSend = true;
				// this.$api.sendRequest({
				// 	url: '/api/member/paypwdcode',
				// 	success: res => {
						// this.dynacodeData.isSend = false;
						// if (res.code >= 0) {
							// this.key = res.data.key;
			
							if (this.dynacodeData.seconds == 60 && this.dynacodeData.timer == null) {
								this.dynacodeData.timer = setInterval(() => {
									this.dynacodeData.seconds--;
									this.dynacodeData.codeText = this.dynacodeData.seconds + 's后可重新获取';
								}, 1000);
							}
						// } else {
						// 	this.$util.showToast({ title: res.message });
						// }
				// 	},
				// 	fail: () => {
				// 		this.$util.showToast({ title: 'request:fail' });
				// 		this.dynacodeData.isSend = false;
				// 	}
				// });
				
			},
			unbind(){
				uni.showModal({
					title:"解绑",
					content:"确定解绑会员卡",
					success: (res) => {
						if(res.confirm){
							
						}
					},
				})
			}
		},
		watch: {
			'dynacodeData.seconds': {
				handler(newValue, oldValue) {
					if (newValue == 0) {
						clearInterval(this.dynacodeData.timer);
						this.dynacodeData = {
							seconds: 60,
							timer: null,
							codeText: '获取动态码',
							isSend: false
						};
					}
				},
				immediate: true,
				deep: true
			}
		}
	}
	
</script>

<style lang="scss">
	
	.b1{
		margin: 70rpx auto 0;
		width: 658rpx;
		height: 120rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 1px solid rgba(204,204,204,0.13);
		padding: 0 30rpx;
		.input_code{
			line-height: 120rpx;
			font-size: 28rpx;
			width: 434rpx;
		}
		.dynacode{
			width: 222rpx;text-align: center;font-size: 24rpx;color: #BFB49B;height: 120rpx;line-height: 120rpx;
		}
	}
	text{color: #ccc;font-size: 38rpx;}
	.p{
		margin:24rpx 46rpx;font-size: 28rpx;color: #888;
	}
	
</style>